<template>
    <div class="h-between-center">
        <el-input
            :disabled="disabled"
            :style="{ width: disabled ? '75%' : '100%', marginRight: disabled ? '10px' : '0' }"
            placeholder="请输入电话号码"
            v-model="input"
            @input="inputHandle"
        ></el-input>
        <div v-if="disabled" style="color: #66b1ff; flex: 1">
            <a :href="'tel:' + input" style="color: #66b1ff; text-decoration: none">
                <i class="el-icon-phone-outline"></i>
                拨打
            </a>
        </div>
    </div>
</template>
<script>
import { debounce } from 'throttle-debounce'
let me
export default {
    name: 'call',
    data() {
        return {
            input: null,
        }
    },
    computed: {
        disabled() {
            return this.$attrs.disabled
        },
    },
    mounted() {
        me = this
        this.input = this.$vnode.data.props.value
    },
    methods: {
        inputHandle: debounce(1000, function () {
            me.$emit('input', me.input)
        }),
    },
}
</script>

<style lang="scss" scoped></style>
